<template>
  <div class="bg-box">
    <Nav></Nav>
    <div class="main-box">
      <!-- TODO:在这里接下来布局 -->
      <div class="ttop">
        <!-- 左上布局 -->
        <div class="left-top">
          <div class="llist">
            <div>状态</div>
            <div>全部</div>
            <div>未报名</div>
            <div>已报名</div>
            <div>已结束</div>
          </div>
          <div class="llist">
            <div>类别</div>
            <div>全部</div>
            <div>人工智能</div>
            <div>爱酱</div>
            <div>算法</div>
            <div>数据结构</div>
            <div>可视化</div>
          </div>
          <div class="demo-input-size">
            <input style="width: 100%; background-color: #eee" />
            <div style="height: 100%; display: flex; align-items: center">
              <div class="divider"></div>
              <img
                src="@/assets/search.svg"
                style="
                  width: 19px;
                  height: 19px;
                  margin: 0 15px;
                  cursor: pointer;
                "
              />
            </div>
          </div>
        </div>
        <!-- 右上布局 -->
        <div class="right-top">此处预留做轮播图</div>
      </div>

      <div class="bbottom">
        <!-- 左下布局 -->
        <div class="left-bottom">
          <div class="item" @click="to('/raceDetail')">
            <!-- 左边头像 -->
            <div class="left-img"></div>
            <!-- 右边内容 -->
            <div class="left-right">
              <div style="margin-top: 15px; font-size: 14px">
                这是一个很牛的比赛
              </div>
              <div style="margin-top: 20px; font-size: 14px">
                比赛时间：2022年10月1日-2022年11月1日
              </div>
              <div style="margin-top: 20px; font-size: 14px">
                类别：
                <span>
                  <el-tag style="margin-left: 0">Tag 1</el-tag>
                  <el-tag class="ml-2" type="success">Tag 2</el-tag>
                  <el-tag class="ml-2" type="info">Tag 3</el-tag>
                  <el-tag class="ml-2" type="warning">Tag 4</el-tag>
                  <el-tag class="ml-2" type="danger">Tag 5</el-tag>
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右下布局 -->
        <div class="right-bottom">
          <div
            style="font-weight: 700; font-size: 24px;margin-top: 15px;margin-left: 20px;}"
          >
            热门竞赛
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import Nav from "@/components/Nav.vue";
const router = useRouter();
const to = (url) => {
  router.push(url);
};
</script>

<style scoped>
.bg-box {
  background-color: #eee;
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-box {
  margin-top: 20px;
  width: 1200px;
}

.ttop {
  display: flex;
  width: 1200px;
}

.left-top {
  width: 800px;
  height: 155px;

  border-radius: 10px;
  background-color: #ffffff;
}

.llist {
  display: flex;
  margin-top: 25px;
  margin-left: 25px;
}
.llist div {
  margin-right: 35px;
}

.demo-input-size {
  height: 35px;
  width: 340px;
  background-color: #eee;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding-left: 15px;
  margin-top: 20px;
  margin-left: 25px;
}

.divider {
  height: 85%;
  width: 0;
  border-left: 1px solid #979797;
}

.right-top {
  width: 321px;
  height: 155px;
  margin-left: 20px;
  background-color: #ffffff;
}

.bbottom {
  display: flex;
  width: 1200px;
}

.left-bottom {
  width: 800px;
  cursor: pointer;
  margin-top: 20px;
}

.item {
  display: flex;
  width: 800px;
  height: 155px;

  background-color: #ffffff;
}

.left-img {
  width: 145px;
  height: 145px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: yellowgreen;
}

.left-right {
  height: 155px;

  margin-left: 40px;
}

span {
  margin-left: 13px;
}

.right-bottom {
  width: 321px;
  height: 505px;
  margin-top: 20px;
  margin-left: 20px;
  background-color: #ffffff;
}
</style>